<template>
  <div>
    <div>
      <homePage></homePage>
    </div>
    <div class="top">
      <i class="el-icon-s-opportunity"></i>
      <p class="title">高级检索</p>
    </div>
    <div>
      <el-card class="search_board">
        <p class="search_title">检索信息：</p>
        <el-select v-model="select1" placeholder="请选择" class="first_select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          placeholder="请输入内容"
          v-model="input1"
          class="input-with-select1"
        >
          <el-select
            v-model="select2"
            slot="append"
            placeholder="请选择"
            style="width: 100px"
          >
            <el-option label="模糊" value="1"></el-option>
            <el-option label="精确" value="2"></el-option>
          </el-select>
        </el-input>
        <div v-for="(item, index) in itemcount" :key="'myid' + index">
          <div class="select_box">
            <el-select
              v-model="myValue[index].op"
              placeholder="请选择"
              class="select_op"
            >
              <el-option label="与" value="1"></el-option>
              <el-option label="或" value="2"></el-option>
              <el-option label="非" value="3"></el-option>
            </el-select>
            <el-select
              v-model="myValue[index].choice"
              placeholder="请选择"
              class="select_choice"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-input
              placeholder="请输入内容"
              v-model="myValue[index].input"
              class="input-with-select1"
            >
              <el-select
                v-model="myValue[index].scope"
                slot="append"
                placeholder="请选择"
                style="width: 100px"
              >
                <el-option label="模糊" value="1"></el-option>
                <el-option label="精确" value="2"></el-option>
              </el-select>
            </el-input>
            <i
              class="el-icon-plus"
              v-if="index === itemcount - 1"
              @click="addItem"
            ></i>
            <i
              class="el-icon-minus"
              v-if="index === itemcount - 1"
              @click="deleteItem"
            ></i>
          </div>
        </div>
        <div style="margin-top: 20px">
          <p class="paper_type">文献类型：</p>
          <el-checkbox v-model="checked1">期刊</el-checkbox>
          <el-checkbox v-model="checked2">会议</el-checkbox>
          <el-checkbox v-model="checked3">其它</el-checkbox>
        </div>
        <div>
          <p class="paper_type">时间范围：</p>
          <el-select
            v-model="start_time"
            placeholder="请选择"
            class="select_time"
          >
            <el-option
              v-for="item in year_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <hr class="line" />
          <el-select
            v-model="end_time"
            placeholder="请选择"
            class="select_time"
          >
            <el-option
              v-for="item in year_option"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="button_div">
          <button class="button" @click="advSearch">检索</button>
        </div>
      </el-card>
    </div>
    <div class="page_bottom">
      <bottom-info></bottom-info>
    </div>
  </div>
</template>

<script>
import bottomInfo from "../components/bottomInfo.vue";
import homePage from "../components/homePage.vue";
export default {
  components: {
    "bottom-info": bottomInfo, //挂载底部组件
    homePage,
  },
  data() {
    return {
      must:[],
      must_not:[],
      should:[],
      should_not:[],
      itemcount: 1,
      myValue: [{}, {}, {}, {}, {}],
      options: [
        {
          value: 1,
          label: "主题",
          name:"idea"
        },
        {
          value: 2,
          label: "标题",
          name:"title"
        },
        {
          value: 3,
          label: "作者",
          name:"author"
        },
        {
          value: 4,
          label: "机构",
          name:"org"
        },
        {
          value: 5,
          label: "期刊号",
          name:"issn"
        }
      ],
      start_time_range: [
        {
          value: "0",
          label: "不限",
        },
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2021",
          label: "2021年",
        },
        {
          value: "2020",
          label: "2020年",
        },
        {
          value: "2019",
          label: "2019年",
        },
      ],
      end_time_range: [
        {
          value: "0",
          label: "不限",
        },
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2021",
          label: "2021年",
        },
        {
          value: "2020",
          label: "2020年",
        },
        {
          value: "2019",
          label: "2019年",
        },
      ],
      select1: "",
      select2: "",
      input1: "",
      checked1: false,
      checked2: false,
      checked3: false,
      start_time: "",
      end_time: "",
      year_option: [
        {
          value: "2018",
          label: "2018年",
        },
        {
          value: "2017",
          label: "2017年",
        },
        {
          value: "2016",
          label: "2016年",
        },
        {
          value: "2015",
          label: "2015年",
        },
        {
          value: "2014",
          label: "2014年",
        },
        {
          value: "2013",
          label: "2013年",
        },
        {
          value: "2012",
          label: "2012年",
        },
        {
          value: "2011",
          label: "2011年",
        },
        {
          value: "2010",
          label: "2010年",
        },
        {
          value: "2009",
          label: "2009年",
        },
        {
          value: "2008",
          label: "2008年",
        },
        {
          value: "2007",
          label: "2007年",
        },
        {
          value: "2006",
          label: "2006年",
        },
        {
          value: "2005",
          label: "2005年",
        },
        {
          value: "2004",
          label: "2004年",
        },
        {
          value: "2003",
          label: "2003年",
        },
        {
          value: "2002",
          label: "2002年",
        },
        {
          value: "2001",
          label: "2001年",
        },
        {
          value: "2000",
          label: "2000年",
        },
        {
          value: "1999",
          label: "1999年",
        },
        {
          value: "1998",
          label: "1998年",
        },
        ],
    };
  },
  methods: {
    addItem() {
      if (this.itemcount === 5) return;
      this.itemcount += 1;
    },
    deleteItem() {
      if (this.itemcount === 1) return;
      this.itemcount -= 1;
    },
    advSearch() {
      /* var must,must_not,should,should_not; */
      this.must.push({item: this.options[this.select1].name,text:this.input1});
      console.log(this.myValue);
      console.log(this.itemcount);
      for(var i=0;i<this.itemcount;i++){
        //console.log(this.myValue[i].length);
          console.log(this.myValue[i].choice);
          if(this.myValue[i].scope=="1"&&this.myValue[i].op=="3"){ //模糊非  should_not
            this.should_not.push({item: this.options[this.myValue[i].choice-1].name,text: this.myValue[i].input});
          }
          else if(this.myValue[i].scope=="2"&&this.myValue[i].op=="1"){ //精确与  must
            this.must.push({item: this.options[this.myValue[i].choice-1].name,text: this.myValue[i].input});
          }
          else if(this.myValue[i].scope=="2"&&this.myValue[i].op=="3"){ //精确非  must_not
            this.must_not.push({item: this.options[this.myValue[i].choice-1].name,text: this.myValue[i].input});
          }
          else{ //模糊与、模糊或、精确或 should
            this.should.push({item: this.options[this.myValue[i].choice-1].name,text: this.myValue[i].input});
          }
      }
      console.log(this.myValue);
      var other,issn,venue;
      if(this.checked1==true){
        issn=1;
      }
      else{
        issn=0;
      }
      if(this.checked2==true){
        venue=1;
      }
      else{
        venue=0;
      }
      if(this.checked3==true){
        other=1;
      }
      else{
        other=0;
      }
      if(this.start_time>this.end_time){
        var temp;
        temp=this.start_time;
        this.start_time=this.end_time;
        this.end_time=temp;
      }
      this.$router.push({name:"SearchResult",params: {"isFromAdvance":true,"search":{
            "must": this.must,  // 精确 是
            "must_not": this.must_not,  // 精确 否
            "should": this.should,  // 模糊 是（只能影响评分排序）
            "should_not": this.should_not,  // 模糊 否（只能影响评分排序）
            "other": other, "issn": issn, "venue": venue,
            "year": {"gte": this.start_time, "lt": this.end_time}}}
          })
      
    }
  },
};
</script>

<style scoped>
.button_div{
  height: 100px;
  display: flex;
  justify-content: space-around;
}
.button {
  background-color: rgb(152, 152, 228);
  border: 1px solid rgb(128, 128, 221);
  color: white;
  padding: 8px 50px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  letter-spacing: 5px;
  cursor: pointer;
  margin: auto;
  border-radius: 5px;
}
.button:hover {
  background-color: rgb(93, 93, 190);
}
.top {
  margin-top: -20px;
  padding-bottom: 10px;
}
.line {
  height: 1.5px;
  width: 20px;
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
}
.el-icon-s-opportunity {
  margin-left: 15%;
  display: inline-block;
  font-size: 30px;
  color: rgb(61, 61, 175);
}
.el-icon-plus {
  font-weight: bold;
  margin-left: 2%;
}
.el-icon-plus:hover {
  cursor: pointer;
  color: rgb(61, 61, 175);
}
.el-icon-minus {
  margin-left: 1%;
  font-weight: bold;
}
.el-icon-minus {
  cursor: pointer;
  color: rgb(61, 61, 175);
}
.title {
  display: inline-block;
  padding-left: 10px;
  font-size: 20px;
  letter-spacing: 2px;
}
.page_bottom {
  height: 110px;
  width: 100%;
  margin: auto;
  margin-top: 4%;
}
.search_board {
  width: 70%;
  margin: auto;
}
.search_title {
  display: inline-block;
  margin-left: 5%;
}
.paper_type {
  display: inline-block;
  margin-left: 5%;
  padding-right: 5%;
}
.select_box {
  margin-top: 10px;
}
.first_select {
  display: inline-block;
  margin-left: 8%;
  width: 120px;
}
.select_op {
  display: inline-block;
  margin-left: 8%;
  width: 100px;
}
.select_choice {
  display: inline-block;
  margin-left: 3%;
  width: 120px;
}
.input-with-select1 {
  width: 50%;
  margin-left: 5%;
}
.select_time {
  width: 15%;
}
::v-deep .input-with-select1 .el-input-group__append {
  background-color: #fff;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: rgb(61, 61, 175);
  border: 1px solid rgb(61, 61, 175);
}
::v-deep .el-checkbox__inner:hover {
  border-color: rgb(61, 61, 175);
}
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: rgb(61, 61, 175);
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: rgb(61, 61, 175);
}
</style>